<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../7.骰子布局练习/css/index.css">
</head>
<body>
    <div class="all">
        <div class="face1 face">
            <div class="point face1_point"></div>
        </div>
        <div class="face2 face">
            <div class="point face2_point"></div>
            <div class="point face2_point"></div>

        </div>
        <div class="face3 face">
            <div class="point face3_point1"></div>
            <div class="point face3_point2"></div>
            <div class="point face3_point3"></div>
        </div>
        <div class="face4 face">
            <div class="face4_row1">
            <div class="point face4_point1"></div>
            <div class="point face4_point1"></div>
            </div>
            <div class="face4_row2">
            <div class="point face4_point2"></div>
            <div class="point face4_point2"></div>
            </div>
        </div>
        <div class="face5 face">
            <div class="face5_row1">
            <div class="point face5_point1"></div>
            <div class="point face5_point1"></div>
            </div>
            <div class="face5_row2">
            <div class="point face5_point2"></div>
            </div>
            <div class="face5_row3">
            <div class="point face5_point3"></div>
            <div class="point face5_point3"></div>
            </div>
        </div>
        <div class="face6 face">
            <div class="face6_row1">
                <div class="point face6_point1"></div>
                <div class="point face6_point1"></div>
            </div>
            <div class="face6_row2">
                <div class="point face6_point2"></div>
                <div class="point face6_point2"></div>
            </div>
            <div class="face6_row3">
                <div class="point face6_point3"></div>
                <div class="point face6_point3"></div>
            </div>
        </div>
        <div class="face7 face">
            <div class="face7_row1">
                <div class="point face7_point1"></div>
                <div class="point face7_point1"></div>
                <div class="point face7_point1"></div>
            </div>
            <div class="face7_row2">
                <div class="point face7_point2"></div>
            </div>
            <div class="face7_row3">
                <div class="point face7_point3"></div>
                <div class="point face7_point3"></div>
                <div class="point face7_point3"></div>
            </div>
        </div>
        <div class="face8 face">
            <div class="face8_row1">
                <div class="point face8_point1"></div>
                <div class="point face8_point1"></div>
                <div class="point face8_point1"></div>
            </div>
            <div class="face8_row2">
                <div class="point face8_point2"></div>
                <div class="point face8_point2"></div>
            </div>
            <div class="face8_row3">
                <div class="point face8_point3"></div>
                <div class="point face8_point3"></div>
                <div class="point face8_point3"></div>
            </div>
        </div>
        <div class="face9 face">
            <div class="face9_row1">
                <div class="point face9_point1"></div>
                <div class="point face9_point1"></div>
                <div class="point face9_point1"></div>
            </div>
            <div class="face9_row2">
                <div class="point face9_point2"></div>
                <div class="point face9_point2"></div>
                <div class="point face9_point2"></div>
            </div>
            <div class="face9_row3">
                <div class="point face9_point3"></div>
                <div class="point face9_point3"></div>
                <div class="point face9_point3"></div>
            </div>
        </div>
    </div>
    <div class="buttonArsa">
        <BR>
           <button class="btn" onclick="change()">投掷</button>
        </div>
       <script>
        const faces= document.querySelectorAll('.face')
        function change(){
        faces.forEach(face => face.classList.remove('active'))
        const faceIndex=Math.floor(Math.random()*faces.length);
        faces[faceIndex].classList.add('active')
        return faceIndex;
        }
       </script>
</body>

</html>